// 状态
import { useRef, useState, useEffect } from "react";

// props                       
export default function TestCom({a}){
    //创建状态
    let [count, setCount] = useState(10);
    //创建容器
    let con = useRef();
    //创建状态
    let [v, setV] = useState('');

    // useEffect(() => {
    //     return () => {

    //     }
    // }, []);

    //返回虚拟 DOM 对象
    return <div>
        <h2 ref={con}>React 复习</h2>
        <hr />
        <h3>状态</h3>
        <div>{count}</div>
        <button onClick={() => {
            // 更新状态的写法
            setCount(count + 1);
            // setCount(v => {
            //     return v - 1;
            // })
        }}>更新</button>
        <h3>Props</h3>
        <div>{a}</div>
        <h3>ref</h3>
        <button onClick={() => {
            console.log(con.current);
        }}>获取h2标签</button>
        <h3>表单元素的值</h3>
        <input type="text" value={v} onChange={e => setV(e.target.value)} />
        <button onClick={() => console.log(v)} >输出</button>
    </div>
}